<template>
  <div class="login">
    <Bg></Bg>
    <div
      class="head"
      :style="{ backgroundImage: 'url(' + headImage + ')' }"
    ></div>
    <div class="message">
      {{ user ? user.user_name : "Login Please" }}
    </div>
    <div class="form">
      <div class="item" v-if="!user" :class="isUserNameError ? 'error' : ''">
        <input
          class="account"
          placeholder="account..."
          type="email"
          v-model="user_account"
          :class="user_account ? 'password-in' : ''"
        />
        <i
          class="login-button iconfont icon-mail"
          :class="user_account ? 'click-enable' : ''"
          @click="send"
        ></i>
      </div>
      <div class="item" :class="isUserPasswordError ? 'error' : ''">
        <input
          class="password"
          placeholder="password..."
          type="password"
          v-model="user_password"
          @keydown="passwordKeyDown"
          :class="user_password ? 'password-in' : ''"
        />
        <i
          class="login-button iconfont icon-gengduo2"
          :class="user_password ? 'click-enable' : ''"
          @click="login"
        ></i>
      </div>
    </div>
    <div class="logout" v-if="user">
      <i
        class="iconfont icon-icon_roundreduce"
        title="注销当前帐号"
        @click="logout"
      ></i>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
export default {
  name: "Login",
  components: {
    Bg: defineAsyncComponent(() => import("@/components/Bg")),
  },
  data() {
    return {
      noHeadImage: require("@/asset/img/head.jpg"),
      headImage: false,
      user: false,
      user_account: "",
      user_password: "123456",
      isUserNameError: false,
      isUserPasswordError: false,
    };
  },
  created() {
    let user = localStorage.getItem("user") || false;
    if (user) {
      this.user = JSON.parse(user);
      this.user_account = this.user.user_id;
      this.headImage = this.user.user_head || this.noHeadImage;
    } else {
      this.headImage = this.noHeadImage;
    }
    this.login();
  },
  methods: {
    passwordKeyDown(e) {
      if (e.key === "Enter") {
        this.login();
      }
    },
    logout() {
      this.$confirm("是否确认当前已登录的帐号？", "注销确认", {
        confirmButtonText: "注销",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功",
          });
          localStorage.removeItem("access_token");
          localStorage.removeItem("user");
          this.$store.commit("saveMyInfo", false);
          this.user = false;
        })
        .catch(() => {});
    },
    login() {
      if (!this.user_account) {
        this.isUserNameError = true;
        setTimeout(() => {
          this.isUserNameError = false;
        }, 1000);
        return;
      }
      if (!this.user_password) {
        this.isUserPasswordError = true;
        setTimeout(() => {
          this.isUserPasswordError = false;
        }, 1000);
        return;
      }
      this.request({
        url: "user/login",
        method: "POST",
        noToken: true,
        data: {
          user_account: this.user_account,
          user_password: this.user_password,
        },
        success: (res) => {
          this.tool.saveAccessToken(res.data.access_token);
          this.$emit("logined");
          this.getMyInfo();
        },
        error: () => {
          this.user_password = "";
          this.isUserPasswordError = true;
          setTimeout(() => {
            this.isUserPasswordError = false;
          }, 1000);
        },
      });
    },
    send() {
      if (!this.user_account) {
        this.isUserNameError = true;
        setTimeout(() => {
          this.isUserNameError = false;
        }, 1000);
        return;
      }
      this.request({
        url: "user/send",
        method: "POST",
        noToken: true,
        data: {
          mail: this.user_account,
        },
        success: (res) => {
          this.$message.success(res.msg);
        },
        error: () => {
          this.isUserNameError = true;
          setTimeout(() => {
            this.isUserNameError = false;
          }, 1000);
        },
      });
    },
    getMyInfo() {
      this.request({
        url: "user/getMyInfo",
        success: (res) => {
          localStorage.setItem("user", JSON.stringify(res.data));
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.error {
  animation: loginErrorAnimation 0.2s ease 3;
}
.login {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  margin-top: -100px;
  z-index: 99;
  backdrop-filter: blur(20px);
  .bg {
    z-index: -1;
  }
  .head {
    background-size: 150px 150px;
    background-position: center center;
    height: 150px;
    width: 150px;
    border-radius: 100%;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
    margin-top: -50px;
    z-index: 1;
  }
  .message {
    margin-top: 20px;
    font-size: 20px;
    text-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
    color: #eee;
    margin-bottom: 50px;
    z-index: 1;
  }
  .form {
    display: flex;
    flex-direction: column;
    align-items: center;
    .item {
      vertical-align: middle;
      position: relative;
      width: 250px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      overflow: hidden;

      .login-button {
        position: absolute;
        top: 5px;
        right: -50px;
        transition: right 0.3s;
      }

      .click-enable {
        right: 0;
      }

      input {
        color: white;
        outline: none;
        border: none;
        margin: 5px;
        font-size: 16px;
        background-color: rgba(255, 255, 255, 0.3);
        padding: 8px 24px;
        border-radius: 20px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        width: 100%;
      }
      .password {
        transition: width 0.3s;
      }

      .password-in {
        width: 155px;
      }

      .iconfont {
        vertical-align: middle;
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.3);
        font-size: 18px;
        border-radius: 100%;
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        cursor: pointer;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
      }
      .iconfont:hover {
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }
  .logout {
    margin-top: 20px;
    .iconfont {
      font-size: 32px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.7);
    }
    .iconfont:hover {
      color: white;
    }
  }
}

::-webkit-input-placeholder {
  color: #fff;
}

::-moz-placeholder {
  color: #fff;
}

:-ms-input-placeholder {
  color: #fff;
}
</style>